<template>
    <div class="p-search" :class="{focus: inputfocus}">
        <div class="search-panel is-focus">
            <div class="search-input">
                <input autocomplete="off" type="text" placeholder="搜索文件" class="p-input" @focus="inputfocus = true" @blur="inputfocus = false" @keypress.enter="search" v-model="keyword">
            </div>
            <div class="btn-search">
                <i class="icon icon-search"></i>
            </div>
        </div>
        <div class="p-menu-group">
            <div class="menu-group">
                <div class="menu-group-hd">
                    <p class="tit">历史记录</p>
                    <div class="hd-act">
                        <a href="javascript:void(0)" class="btn-clear">清除记录</a>
                    </div>
                </div>
                <div class="menu-group-bd">
                    <ul class="menu-list">
                        <li class="menu-list-item">
                            <span class="item-txt">w</span>
                            <span title="删除" class="item-act">
                                <i class="icon icon-close"></i>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ipcRenderer } from 'electron';

export default {
    name: 'search',
    data() {
        return {
            keyword: '',
            inputfocus: false
        }
    },
    created() {
        ipcRenderer.on('searchFile-back', (event, data) => {
            console.log(data);
        })
    },
    computed: {
        access_token() {
            return this.$store.getters.GET_ACCESSTOKEN;
        }
    },
    methods: {
        search() {
            ipcRenderer.send('getSearchFile', {
                access_token: this.access_token,
                keyword: this.keyword,
                startNum: 1,
                endNum: 50
            });
        }
    }
}
</script>

<style scoped>
.icon {
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  font-size: 0;
  overflow: hidden;
  -webkit-text-size-adjust: none;
  vertical-align: middle;
}
.icon-search {
  width: 24px;
  height: 24px;
  background-image: url(./icon/icon-search.svg);
}

.icon-close {
  width: 24px;
  height: 24px;
  background-image: url(./icon/icon-close.svg);
  position: absolute;
  top: 30%;
  left: 30%;
}

.p-search {
  position: relative;
  display: inline-block;
  width: 260px;
}

.p-search .close {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  width: 36px;
  z-index: 5;
}

.p-search.focus {
  width: 340px;
}

.p-search .close .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -12px;
}

.p-search .search-panel {
  background: #e9eef2;
  padding: 0 44px 0 10px;
  border-radius: 2px;
  border: 1px solid #e9eef2;
  transition: ease all;
  transition-duration: 0.3s;
}

.p-search.focus .search-panel,
.p-search:hover .search-panel {
  border: 1px solid #d2d8dc;
}

.p-search .p-input {
  position: relative;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  width: 100%;
  height: 20px;
  line-height: 20px;
  padding: 7px 0;
  border-radius: 4px;
  color: #a2a2a2;
  z-index: 4;
  border: 0;
  background: 0 0;
  outline: none;
}

.p-search.focus .p-input,
.p-search.istext .p-input {
  color: #000;
  opacity: 1;
}

.p-search .btn-search {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  z-index: 5;
  cursor: pointer;
}

.p-search .icon-search {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -12px;
}

.p-search.searching .icon-search {
  background: url();
}

.p-search .p-menu-group {
  position: absolute;
  left: 0;
  top: 35px;
  visibility: hidden;
  max-height: 0;
  opacity: 0;
  width: 260px;
  overflow: scroll;
  z-index: 1;
}

.p-search.focus .p-menu-group {
  visibility: visible;
  max-height: 480px;
  overflow: hidden;
  opacity: 1;
  width: 340px;
}

.p-search,
.p-search.focus .p-menu-group {
  -webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

.p-menu-group {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 4px 0 rgba(15, 32, 65, 0.2);
  width: 340px;
  border: 1px solid #c8ccd3;
}

.p-menu-group .menu-group {
  border-bottom: 1px solid #edeff0;
}

.p-menu-group .menu-group:last-child {
  border-bottom: 0 none;
}

.p-menu-group .menu-group-hd {
  position: relative;
  height: 34px;
  line-height: 34px;
  color: #777;
  font-size: 12px;
}

.p-menu-group .menu-group-hd .hd-act {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.p-menu-group .menu-group-hd .hd-act a {
  color: #00a4ff;
  padding: 0 12px;
}

.p-menu-group .menu-group .tit {
  padding: 0 0 0 15px;
}

.p-menu-group .menu-list-item {
  position: relative;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  padding: 0 0 0 15px;
}

.p-menu-group .menu-list-item:hover {
  background: #f5f8fa;
}

.p-menu-group .menu-list-item .item-act {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  text-align: center;
  display: none;
}

.p-menu-group .menu-list-item:hover .item-act {
  display: block;
}

.p-menu-group .menu-list-item .item-act .icon-close {
  opacity: 0.5;
}
</style>
